<!-- Navigation -->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" th:fragment="common_navbar">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <a href="/">
            <img class="user-avatar"
                 style="border: 3px solid #fff; border-radius: 50%; margin-top: 6px; margin-left: 10px; float: left;"
                 th:src="@{/media/img/ke_login.png}" width="40px">
        </a>
        <a class="navbar-brand" href="/index"> New Kafka Eagle</a>
        <div class="modal fade" aria-labelledby="keModalLabel" aria-hidden="true" id="ke_account_reset_dialog"
             tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" type="button" data-dismiss="modal">×</button>
                        <h4 class="modal-title" id="keModalLabel">Reset password</h4>
                    </div>
                    <!-- /.row -->
                    <form role="form" th:action="@{/account/resetPassword}" method="post"
                          onsubmit="return contextPasswdFormValid();">
                        <div class="modal-body">
                            <fieldset class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">New</label>
                                    <div class="col-sm-10">
                                        <input id="ke_new_password_name" name="ke_new_password_name" type="password"
                                               class="form-control" maxlength="16" placeholder="New Password">
                                    </div>
                                </div>
                                <div id="alert_mssage" style="display: none" class="alert alert-danger">
                                    <label> Passwords can only be number and letters or special symbols .</label>
                                </div>
                            </fieldset>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancle</button>
                            <button type="submit" class="btn btn-primary" id="create-btn">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Top Menu Items -->
    <ul class="nav navbar-right top-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-sitemap"></i>
                <span th:text="${session.clusterAlias}"></span>
                <b class="caret"></b>
            </a>
            <!-- 不存在其他kafka集群 -->
            <ul class='dropdown-menu' th:if="${#lists.isEmpty(session.clusterAliasList)}">
                <li >
                    <a href='/cluster/multi'><i class='fa fa-fw fa-tasks'></i>More...</a>
                </li>
            </ul>
            <!-- 显示其他Kafka集群 -->
            <ul class='dropdown-menu' th:if="${not #lists.isEmpty(session.clusterAliasList)}" th:each="cluster : ${session.clusterAliasList}">
                <li>
                    <a th:href="'/cluster/info/' + ${cluster} + '/change'">
                        <i class='fa fa-fw fa-sitemap'></i>
                        <span th:text="${cluster}"></span>
                    </a>
                </li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-bookmark"></i>
                <span th:text="${session.version}"></span>
            </a>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <i class="fa fa-user"></i>
                <span th:text="${session.LOGIN_USER_NAME}"></span>
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li>
                    <a name="ke_account_reset" href="#">
                        <i class="fa fa-fw fa-gear"></i>
                        Reset
                    </a>
                </li>
                <li>
                    <a href="/account/signout">
                        <i class="fa fa-fw fa-power-off"></i>
                        Signout
                    </a>
                </li>
            </ul>
        </li>
    </ul>
    <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav side-nav">
            <li id="navbar_dash">
                <a href="">
                    <i class="fa fa-fw fa-dashboard"></i>
                    Dashboard
                </a>
            </li>
            <li>
                <a href="#" data-toggle="collapse" data-target="#demo">
                    <i class="fa fa-fw fa-comments-o"></i>
                    Topic
                    <i class="fa fa-fw fa-caret-down"></i>
                </a>
                <ul id="demo" class="collapse">
                    <li>
                        <a href="/topic/create">
                            <i class="fa fa-edit fa-fw"></i>
                            Create
                        </a>
                    </li>
                    <li>
                        <a href="/topic/list">
                            <i class="fa fa-table fa-fw"></i>
                            List
                        </a>
                    </li>
                    <li>
                        <a href="/topic/message">
                            <i class="fa fa-file-text fa-fw"></i>
                            KSQL
                        </a>
                    </li>
                    <li>
                        <a href="/topic/mock">
                            <i class="fa fa-maxcdn fa-fw"></i>
                            Mock
                        </a>
                    </li>
                    <li>
                        <a href="/topic/manager">
                            <i class="fa fa-tasks fa-fw"></i>
                            Manager
                        </a>
                    </li>
                </ul>
            </li>
            <li id="navbar_consumers">
                <a href="/consumers">
                    <i class="fa fa-fw fa-users"></i>
                    Consumers
                </a>
            </li>
            <li>
                <a href="#" data-toggle="collapse" data-target="#demo2">
                    <i class="fa fa-fw fa-cloud"></i>
                    Cluster
                    <i class="fa fa-fw fa-caret-down"></i>
                </a>
                <ul id="demo2" class="collapse">
                    <li id="navbar_cli">
                        <a href="/cluster/info">
                            <i class="fa fa-sitemap fa-fw"></i>
                            ZK & Kafka
                        </a>
                    </li>
                    <li>
                        <a href="/cluster/multi">
                            <i class="fa fa-maxcdn fa-fw"></i>
                            Multi-Clusters
                        </a>
                    </li>
                    <li id="navbar_zk">
                        <a href="/cluster/zkcli">
                            <i class="fa fa-terminal fa-fw"></i>
                            ZkCli
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" data-toggle="collapse" data-target="#demo4">
                    <i class="fa fa-fw fa-eye"></i>
                    Metrics
                    <i class="fa fa-fw fa-caret-down"></i>
                </a>
                <ul id="demo4" class="collapse">
                    <li>
                        <a href="/metrics/brokers">
                            <i class="fa fa-sitemap fa-fw"></i>
                            Brokers
                        </a>
                    </li>
                    <li>
                        <a href="/metrics/kafka">
                            <i class="fa fa-bar-chart-o fa-fw"></i>
                            Kafka
                        </a>
                    </li>
                    <li>
                        <a href="/metrics/zk">
                            <i class="fa fa-area-chart fa-fw"></i>
                            Zookeeper
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" data-toggle="collapse" data-target="#demo1">
                    <i class="fa fa-fw fa-bell"></i>
                    Alarm
                    <i class="fa fa-fw fa-caret-down"></i>
                </a>
                <ul id="demo1" class="collapse">
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#demo1_3">
                            <i class="fa fa-fw fa-bullhorn"></i>
                            Channel
                            <i class="fa fa-fw fa-caret-down"></i>
                        </a>
                        <ul id="demo1_3" class="collapse" style="list-style: none; margin-left: -40px">
                            <li id="navbar_config">
                                <a href="/alarm/config"
                                   style="display: block; padding: 10px 15px 10px 68px; text-decoration: none; color: #999;">
                                    <i class="fa fa-info-circle fa-fw"></i>
                                    Config
                                </a>
                            </li>
                            <li id="navbar_list">
                                <a href="/alarm/list"
                                   style="display: block; padding: 10px 15px 10px 68px; text-decoration: none; color: #999;">
                                    <i class="fa fa-edit fa-fw"></i>
                                    List
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#demo1_1">
                            <i class="fa fa-fw fa-users"></i>
                            Consumer
                            <i class="fa fa-fw fa-caret-down"></i>
                        </a>
                        <ul id="demo1_1" class="collapse" style="list-style: none; margin-left: -40px">
                            <li id="navbar_add">
                                <a href="/alarm/add"
                                   style="display: block; padding: 10px 15px 10px 68px; text-decoration: none; color: #999;">
                                    <i class="fa fa-info-circle fa-fw"></i>
                                    Add
                                </a>
                            </li>
                            <li id="navbar_modify">
                                <a href="/alarm/modify"
                                   style="display: block; padding: 10px 15px 10px 68px; text-decoration: none; color: #999;">
                                    <i class="fa fa-edit fa-fw"></i>
                                    Modify
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#demo1_2">
                            <i class="fa fa-fw fa-cloud"></i>
                            Cluster
                            <i class="fa fa-fw fa-caret-down"></i>
                        </a>
                        <ul id="demo1_2" class="collapse" style="list-style: none; margin-left: -40px">
                            <li>
                                <a href="/alarm/create"
                                   style="display: block; padding: 10px 15px 10px 68px; text-decoration: none; color: #999;">
                                    <i class="fa fa-info-circle fa-fw"></i>
                                    Create
                                </a>
                            </li>
                            <li id="navbar_history">
                                <a href="/alarm/history"
                                   style="display: block; padding: 10px 15px 10px 68px; text-decoration: none; color: #999;">
                                    <i class="fa fa-edit fa-fw"></i>
                                    History
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <!-- 是否是管理员角色 -->
            <li th:if="${session.IF_SYSTEM_ADMIN} == 1">
                <a href="#" data-toggle="collapse" data-target="#demo3">
                    <i class="fa fa-fw fa-cog"></i>
                    System
                    <i class="fa fa-fw fa-caret-down"></i>
                </a>
                <ul id="demo3" class="collapse">
                    <li>
                        <a href="/system/user">
                            <i class="fa fa-user fa-fw"></i>
                            User
                        </a>
                    </li>
                    <li>
                        <a href="/system/role">
                            <i class="fa fa-key fa-fw"></i>
                            Role
                        </a>
                    </li>
                    <li>
                        <a href="/system/resource">
                            <i class="fa fa-folder-open fa-fw"></i>
                            Resource
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/bs" target="_blank">
                    <i class="fa fa-fw fa-desktop"></i>
                    BScreen
                </a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</nav>